<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>电网SDK V2</title>
    <style>
      .group-title {
        font-weight: bolder;
      }

      .link-item {
        vertical-align: top;
        display: inline-block;
        width: calc(20% - 34px);
        height: 80px;
        margin: 10px;
        padding: 5px;
        border: solid 1px #009bcc;
        border-radius: 5px;
        background: #2f97f1a1;
        font-size: 12px;
      }

      .link-item:hover {
        -webkit-box-shadow: 0px 0px 20px 0px rgb(115 115 115);
        box-shadow: 0px 0px 20px 0px rgb(115 115 115);
      }

      .long-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      p {
        margin: 1px;
        padding: 1px;
      }
    </style>
    <script src="js/configData.js"></script>
    <script src="libs/egis-V2.min.js"></script>
    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
  </head>
  <body>
    <p class="group-title">电网GIS平台JSSDK-V2</p>
    <!--API文档-->
    <p class="group-title">开发手册</p>
    <p><a style="font-size:12px;" href="docs/index.html">点击查看</a></p>
    <!--示例代码-->
    <p class="group-title">示例</p>
    <div id="exampleLinks"></div>
    <!--各种微服务验证工具-->
    <p class="group-title">工具</p>
    <div>
      <div>集成应用登录测试</div>
      应用Key(AppKey):<input
        type="text"
        id="ms_appKey"
        style="width:260px;"
      />应用密钥(SecretKey):<input
        type="text"
        id="ms_secretKey"
        style="width:260px;"
      /><input
        type="button"
        id="ms_loginBtn"
        value="测试"
        onclick="integrateLogin()"
      />
      <br />
      <textarea
        id="ms_loginResult"
        style="border:solid 1px #cccccc;border-radius: 3px;width:818px;height:100px;"
      ></textarea>
    </div>
    <script>
      //默认示例部分
      var pageInfos = [
        {
          url: 'calcTerminal-1.html',
          name: '单端子设备移动/旋转',
          info: '实现了单端子设备在和线设备关联状态下的联动功能',
        },
        {
          url: 'calcTerminal-2.html',
          name: '双端子设备移动/旋转',
          info: '实现了双端子设备在和线设备关联状态下的联动功能',
        },
        {
          url: 'calcTerminal-3.html',
          name: '三端子设备移动/旋转',
          info: '实现了三端子设备在和线设备关联状态下的联动功能',
        },
        {
          url: 'calcTerminal-4.html',
          name: '四端子设备移动/旋转',
          info: '实现了四端子设备在和线设备关联状态下的联动功能',
        },
        {
          url: 'calcTerminal-snap.html',
          name: '设备关联端子',
          info:
            '实现了设备跟随鼠标移动，并让设备的其中一个端子与线路关联后进行绘制',
        },
        {
          url: 'eg-ChangeMapStyle.html',
          name: '地图样式切换',
          info: '实现了地图的底图样式切换(普通/浅色/深色/影像)',
        },
        {
          url: 'eg-CreateMap.html',
          name: '创建地图',
          info:
            '通过电网SDK V2创建一个地图实例(通过思极地图的API直接创建的地图对象相比通过电网SDK V2创建的地图实例对象会缺少一些电网相关的辅助方法和属性)',
        },
        {
          url: 'eg-DrawSymbol.html',
          name: '绘制电力符号',
          info: '实现了绘制点设备的同时同步绘制线设备',
        },
        {
          url: 'eg-MoveSymbol.html',
          name: '符号移动',
          info: '实现了对符号的移动',
        },
        {
          url: 'layer-AnimateLayer.html',
          name: '动画图层',
          info: '通过序列帧图片实现线路的动画效果',
        },
        {
          url: 'layer-FeatureLayer.html',
          name: '电网要素图层',
          info: '适用于本地电网大量要素渲染',
        },
        {
          url: 'layer-FlowLayer.html',
          name: '流动图层',
          info: '通过配置不同的颜色，实现线路的流动效果',
        },
        {
          url: 'layer-GridCellLayer.html',
          name: '网格图层(网格背景)',
          info:
            '绘制一个带纯色背景和网格线的区域为部分电网设备当背景（主要用在站内图场景）',
        },
        {
          url: 'layer-GridTileExtLayer.html',
          name: '电网矢量切片图层',
          info:
            '通过指定的雪碧图，高效的渲染电网矢量切片（主要适用于展示相关的场景，加载快）',
        },
        {
          url: 'layer-GridVectorLayer.html',
          name: '电网矢量栅格图层',
          info:
            '通过WebGL渲染来自矢量栅格服务返回的电网数据(适用的业务场景最多，加载稍慢)',
        },
        {
          url: 'layer-SymbolLayer.html',
          name: '电网符号图层(适用少量设备有编辑需求的场景)',
          info:
            '通过WebGL的形式渲染电网设备，每个电网设备都会作为一个独立的图层来添加，方便业务层对单个/少量设备进行查找和操作，适用于移动/编辑相关的业务场景',
        },
        {
          url: 'support-DevCache.html',
          name: '本地设备缓存(需配合GridVectorLayer使用)',
          info:
            '可将业务层的电网设备数据与电网网架中的设备进行叠加，让业务层能将本地设备加入到电网网架内让SDK来统一处理',
        },
        {
          url: 'support-DisplaySchema.html',
          name: '本地样式缓存(需配合GridVectorLayer使用)',
          info:
            '支持业务层对指定设备类型，以及指定类型下特定设备的样式进行设置，GridVectorLayer会将DisplaySchema中定义的样式对电网网架内的设备样式进行覆盖',
        },
        {
          url: 'tool-HighLightTool.html',
          name: '设备高亮工具',
          info: '将业务层的电网设备数据进行高亮渲染，支持闪烁',
        },
        {
          url: 'tool-LocateTool.html',
          name: '设备定位工具',
          info: '支持中心点+层级定位和地图范围定位两种方式',
        },
        {
          url: 'tool-SelectTool.html',
          name: '设备选择工具',
          info:
            '支持点选/矩形/圆形/多边形四种选择方式，支持FeatureLayer/GridVectorLayer/GridTileExtLayer',
        },
        {
          url: 'tool-SnapTool.html',
          name: '设备捕捉工具',
          info:
            '支持对GridVectorLayer渲染的电网设备进行捕捉，主要用于本地电网图绘制时，有“按设备关联关系”绘制时的场景',
        },
        {
          url: 'util-EncryptUtil.html',
          name: '加解密工具',
          info:
            '提供了SM2，SM3，SM4三种国密算法。同时支持生成微服务的请求头信息。',
        },
        {
          url: 'util-SymbolUtil.html',
          name: '符号预览工具',
          info: '提供电网符号的预览',
        },
      ]
      let exampleContainer = document.getElementById('exampleLinks')
      let linkStrs = ''
      for (let i = 0; i < pageInfos.length; i++) {
        linkStrs += `<div class="link-item"><p class="long-text" style="font-size:14px;color:#ffffff;">${pageInfos[i].name}</p><p class="long-text" title="${pageInfos[i].info}">${pageInfos[i].info}</p><a href="${pageInfos[i].url}" target="_blank">点击查看</a></div>`
      }
      exampleContainer.innerHTML = linkStrs

      //测试工具部分
    </script>
    <script>
      function integrateLogin() {
        let appKey = (msKey = document.getElementById('ms_appKey').value)
        let secretKey = (msSecretKey = document.getElementById('ms_secretKey')
          .value)

        if (appKey && secretKey) {
          document.getElementById('ms_loginResult').innerText =
            '正在请求，请稍候...'
          post(msServiceUrl + '/authorityservice/login/integrate', {
            appkey: msKey,
          })
            .then(
              (res) => {
                document.getElementById(
                  'ms_loginResult'
                ).innerText = JSON.stringify(res.data)
              },
              (err) => {
                document.getElementById('ms_loginResult').innerText = '登录错误'
              }
            )
            .catch((e) => {
              document.getElementById('ms_loginResult').innerText = '登录异常'
            })
        } else {
          alert('请填写appKey和SecretKey')
        }
      }
    </script>
  </body>
</html>
